<template>
  <view class="container">

    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text>手机号登录</text>
      </view>
      <view class="sub-title">
        <text>未注册的手机号登录后将自动注册</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="login-form">
      <!-- 手机号 -->
      <view class="form-item">
        <input class="form-item--input" type="number" v-model="form.mobile" maxlength="11" placeholder="请输入手机号码" />
      </view>
	  <view class="form-item">
	    <input class="form-item--input" type="password" v-model="form.password" maxlength="11" placeholder="请输入密码" />
	  </view>
      <!-- 图形验证码 -->
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="form.captchaCode" maxlength="5" placeholder="请输入图形验证码" />
        <view class="form-item--parts">
          <view class="captcha" @click="getCaptcha()">
            <image class="image" :src="captcha"></image>
          </view>
        </view>
      </view>
      <!-- 登录按钮 -->
      <view class="login-button" @click="handleLogin">
        <text>登录</text>
      </view>
    </view>


  </view>
</template>

<script>
  import store from '@/store'
import * as LoginApi from '@/api/login.js'
  import * as Verify from '@/utils/verify'
 import { checkLogin } from '@/utils/tips.js'
 import storage from '@/utils/storage'
  // 倒计时时长(秒)
  const times = 60

  export default {
    data() {
      return {
        // 正在加载
        isLoading: false,
        // 图形验证码信息
        captcha:'',
		form:{
			mobile: '',
			password:'',
			// 图形验证码
			captchaCode: '',
			uuid:''
		},
		// 是否已登录
		isLogin:false,
      }
    },
    /**
     * 生命周期函数--监听页面加载
     */
    created() {
		// 获取图形验证码
		this.getCaptcha()
		this.checkLogin()
    },

    methods: {
		//检查是否已登录
		checkLogin(){
			this.isLogin=this.$store.state.user.isLogin
			if(this.isLogin){
				uni.switchTab({
					url: '../index/index'
				});
			}
		},
      // 获取图形验证码
      getCaptcha() {
        LoginApi.image().then((res) =>{
			 this.captcha = "data:image/gif;base64," + res.img;
			 this.form.uuid=res.uuid;
		  })
      },

      // 验证手机号
      validteMobile(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入手机号')
          return false
        }
        // if (!Verify.isMobile(str)) {
        //   this.$toast('请输入正确格式的手机号')
        //   return false
        // }
        return true
      },

      // 验证图形验证码
      validteCaptchaCode(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入图形验证码')
          return false
        }
        return true
      },
	  // 点击登录
	  handleLogin() {
		 if (this.validteMobile(this.form.mobile) || this.validteCaptchaCode(this.form.captchaCode)) {
			this.submitLogin()
		}
	  },
	  
      // 确认登录
      submitLogin() {
        const _this = this
        _this.isLoading = true
		const postdata={
            username:this.form.mobile,
			password:this.form.password,
			code:this.form.captchaCode,
			uuid:this.form.uuid
          }
        store.dispatch('Login', postdata).then(result => {
				_this.isLoading = false
			   store.dispatch('GetInfo').then(() => {
				   this.checkLogin()
			   })
          })
      },

      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta = 1) {
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack({
            delta: Number(delta || 1)
          })
        } else {
          this.$navTo('pages/index/index')
        }
      }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 28rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }

    // 图形验证码
    .captcha {
      height: 100%;

      .image {
        display: block;
        width: 192rpx;
        height: 100%;
      }
    }

    // 短信验证码
    .captcha-sms {
      font-size: 28rpx;
      line-height: 50rpx;
      padding-right: 20rpx;

      .activate {
        color: #cea26a;
      }

      .un-activate {
        color: #9e9e9e;
      }
    }
  }


  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: linear-gradient(to right, #ecb53c, #ff9211);
    color: #fff;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>